<template>
	<div style="background-color: #FAFAFA;">
		<div>
			<van-nav-bar title="杏坛广场" @click-right="editNewBlogPageShowButton">
				<template #right>
					<van-icon name="plus" size="18" />
				</template>
			</van-nav-bar>
			<van-tabs v-model:active="active" swipeable>
				<van-tab title="推荐">
					<BlogSubpage :openUserPage="openUserPage" listType="last"></BlogSubpage>
				</van-tab>
				<van-tab title="热门">
					<BlogSubpage :openUserPage="openUserPage" listType="hot"></BlogSubpage>
				</van-tab>
				<van-tab title="关注">
					<BlogSubpage :openUserPage="openUserPage" listType="subscribe_blog_list"></BlogSubpage>
				</van-tab>
			</van-tabs>
		</div>
		<van-popup v-model:show="editNewBlogPageShow" position="right" :style="{ width: '100%', height: '100%' }" closeable
			close-icon="arrow-left" close-icon-position="top-left">
			<EditNewBlogPage :close="closeEditNewBlogPage"></EditNewBlogPage>
		</van-popup>
		<van-popup v-model:show="userHomePageShow" position="right" :style="{ width: '100%', height: '100%' }" closeable
			close-icon="arrow-left" close-icon-position="top-left">
			<UserHomePage :uid="userHomeId"></UserHomePage>
		</van-popup>
		
	</div>
</template>

<script>
	import BlogSubpage from './BlogSubpage.vue';
	import EditNewBlogPage from './EditNewBlogPage.vue';
	import UserHomePage from './UserHomePage';
	
	import {
		ref
	} from 'vue';

	export default {
		components: {
			BlogSubpage,
			EditNewBlogPage,
			UserHomePage
		},
		data() {
			return {
				editNewBlogPageShow: false,
				userHomePageShow: false,
				userHomeId: '',
			}
		},
		methods:{
			editNewBlogPageShowButton(){
				this.editNewBlogPageShow=true;
			},
			closeEditNewBlogPage(){
				this.editNewBlogPageShow=false;
			},
			openUserPage(uid){
				this.userHomeId = uid;
				this.userHomePageShow=true;
			}
		},
		
		setup() {
			const active = ref(0);
			return {
				active
			};
		},
	}
</script>
<style>
	.gc-nav {
		width: 100%;
		height: 5vh;
		z-index: 5;
	}
</style>